<template>
	<view class="content">
		<view class="title">登录</view>
		<view class="list">
			<view class="list_line">手机号码</view>
			<view class="list_cont">
				<image class="login_icon" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/phone.png" mode=""></image>
				<view class="list_input">
					<input type="number" placeholder="请输入手机号码" class="input" placeholder-class="place" maxlength="11" v-model="phone" />
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_line">登录密码</view>
			<view class="list_cont">
				<image class="login_icon" src="https://taobaoke-paimai.oss-cn-beijing.aliyuncs.com/password.png" mode=""></image>
				<view class="list_input">
					<input type="password" placeholder="请输入密码" class="input" placeholder-class="place" v-model="password" />
				</view>
			</view>
		</view>
		<view class="login_procol">登录即同意 <text class="proctol" @click="protocol(1)">《用户协议》</text>
			<text class="proctol" @click="protocol(2)">《隐私协议》</text></view>
		<view class="formBtn" @click="login">登录</view>
		<view class="bot_handle">
			<view class="bot_register" @click="register">还没有账号？<text class="proctol">立即注册</text></view>
			<view class="bot_forget" @click="forget">忘记密码？</view>
		</view>
		<!--  -->
		<!-- 弹窗协议 -->
		<view class="mask" v-if="isVisible == true">
			<view class="popup">
				<view class="title">用户隐私政策说明</view>
				<view class="con_title">尊敬的优集聚用户：</view>
				<view class="content">
					<view class="t_con">
						感谢您选择优集聚APP, 我们非常重视您的个人信息和隐私保护。为了更好的保护您的个人权益，在您使用我们产品前请仔细阅读
						《<text style="color: red;" @click.stop="protocol(1)">用户协议</text>》与《<text style="color: red;" @click.stop="protocol(2)">隐私政策</text>》所有条款。主要内容如下：
					</view>
					<view class="con_first">1.明确了各个功能需要对应获取个人信息</view>
					<view class="con_first">2.说明获取个人隐私信息的用途</view>
					<view class="btn_con">
						<view class="reject_btn" @click="checked(1)">不同意</view>
						<view class="aggrement_btn" style="background-color: red;" @click="checked(2)">同意</view>
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>
    
<script>
	import api from "../../../common/api/api.js"
	export default {
		data() {
			return {
				phone:'',
				password:'',
				isVisible:true
			}
		},
		onLoad() {
			console.log("999",this.$queue)
			uni.hideLoading()
		},
		methods: {
			// 协议
			protocol: function (type) {
				console.log(type)
				uni.navigateTo({
					url: 'potocol/potocol?type=' + type,
				});
			},
			// 登录
			login: function () {
				let that = this;
				if (that.phone == '') {
					that.tui.toast('请输入账号');
					return
				} else if (that.password == '') {
					that.tui.toast('请输入密码');
					return
				}
				// #ifdef APP-PLUS
				// 获取设备CID  
				var pinf = plus.push.getClientInfo();
				let cid = pinf.clientid; //客户端标识    
				console.log("-----------------",cid)
				// #endif
				api.userLogin({
					username:that.phone,
					password:that.password,
					//#ifdef APP-PLUS
					clientId:cid,
					//#endif
					//#ifdef H5
					clientId:"1",
					//#endif
				}).then(res => {
					console.log("res",res)
					
					uni.setStorageSync("token", res.data.token);
					this.api.getUserInfo().then(res => {
						console.log("用户信息",res)
						this.$queue.setData('userId', res.data.uid);
					})
					
					// this.$queue.setData('token', res.data.uuid);
					
					// this.$queue.setData('mobile', mobile);
					setTimeout(function () {
						uni.$emit('login', {msg: '用户信息更新'})
					},1000)
					uni.switchTab({
						url:'../../../../index/index'
					})
				})
			},
			// 注册
			register: function () {
				uni.navigateTo({
					url: 'register/register',
				});
			},
			// 忘记密码
			forget: function () {
				uni.navigateTo({
					url: 'forget/forget',
				});
			},
			// 同意
			checked:function(index){
				console.log(index)
				if(index == 1)
					this.isVisible = true
				if(index == 2)
					this.isVisible = false
			},
			
			
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 128rpx 50rpx 0rpx 50rpx;
		letter-spacing: 3rpx;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		color: #333333;
	}
	.title {
		width: 100%;
		box-sizing: border-box;
		font-size: 68rpx;
		line-height: 98rpx;
		padding: 40rpx 0;
	}
	.list {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 14rpx;
		.list_line {
			width: 100%;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 80rpx;
		}
		.list_cont {
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #DDDDDD;
			border-radius: 8rpx;
			padding: 12rpx 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.login_icon {
				width: 50rpx;
				height: 50rpx;
			}
			.list_input {
				width: calc(100% - 50rpx);
				box-sizing: border-box;
				padding-left: 30rpx;
				.input {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 36rpx;
				}
				.place {
					font-size: 30rpx;
					color: #999999;
				}
			}
		}
	}
	button{
		padding: 0;
	}
	button::after {
		border: none;
		resize: none;
	}
	.login_procol {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		line-height: 33rpx;
		font-size: 24rpx;
		.proctol {
			color: #E42221;
		}
	}
	.formBtn {
		width: 100%;
		box-sizing: border-box;
		text-align: center;
		line-height: 94rpx;
		border-radius: 8rpx;
		background: #E42221;
		margin: 64rpx 0 30rpx 0;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.bot_handle {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		line-height: 33rpx;
		.proctol {
			color: #E42221;
		}
	}
	// 隐私政策
	.mask{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.4);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		.popup{
			width: 620rpx;
			height: 800rpx;
			box-sizing: border-box;
			min-height: 400rpx;
			background-color: #FFFFFF;
			padding: 30rpx;
			z-index: 99999;
			border-radius: 10rpx;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			.title{
				font-size: 31rpx;
				font-weight: bold;
				height: 68rpx;
				line-height: 68rpx;
			}
			.con_title{
				height: 68rpx;
				font-size: 29rpx;
				line-height: 68rpx;
			}
			.content{
				background-color: #FFFFFF;
				height: 450rpx;
				font-size: 26rpx;
				color: #333333;
				font-weight: 500;
				.t_con{
					line-height: 48rpx;
					font-size: 29rpx;
					text{
						color: #8E9AFF;
					}
				}
				.con_first{
					line-height: 68rpx;
				}
				.btn_con{
					display: flex;
					justify-content: space-between;
					align-items: center;
					view{
						width: 250rpx;
						text-align: center;
						font-size: 29rpx;
						letter-spacing: 5rpx;
						line-height: 80rpx;
						color: #FFFFFF;
						border-radius: 12rpx;
						margin-top: 80rpx;
					}
					.reject_btn{
						background-color: #999999;
					}
					.aggrement_btn{
						background-color: #0faeff;
					}
				}
			}
		}
	}

</style>
